// jq轮播图插件
;
(function($) {
    "use strict";
    $.fn.banner = function(imgs, ops) {
        let that = this;
        //设置是否有默认值
        ops = ops ? ops : {};
        let { btns = true, list = true, autoPlay = true, delayTime = 2000, moveTime = 200, index = 0 } = ops;
        //设置上一个索引的默认值
        let prev = 0;
        //图片渲染
        let str = "";
        imgs.forEach(val => {
            str += `<img src="${val.src}" title = "${val.title}">`
        });
        const pics = $("<div class='imgbox'>" + str + "</div>").appendTo(this).children("img");
        pics.css("left", pics.eq(0).width()).eq(index).css("left", 0);

        //左右按钮
        if (btns) {
            $("<div class='btns'></div>").append("<input type='button' value='<' id='left'>").append("<input type='button' value='>' id='right'>").appendTo(this).children("#left").click(leftClick).end().children("#right").click(rightClick);
        }

        function leftClick() {
            if (index === 0) {
                index = imgs.length - 1;
                prev = 0;
            } else {
                index--;
                prev = index + 1
            };
            // console.log(prev, index);
            move(-1, prev, index)
        }

        function rightClick() {
            if (index === imgs.length - 1) {
                index = 0;
                prev = imgs.length - 1;
            } else {
                index++;
                prev = index - 1
            };
            // console.log(prev, index);
            move(1, prev, index)
        }
        //分页按钮
        if (list) {
            let str = ""
            imgs.forEach((val, idx) => {
                str += `<span></span>`
            });
            //设置默认项的css
            $(`<div class="list">${str}</div>`).appendTo(this).children("span").eq(index).css({
                background: "yellow",
            }).end().click(function() {
                if ($(this).index() > index) {
                    move(1, index, $(this).index())
                }
                if ($(this).index() < index) {
                    move(-1, index, $(this).index())
                }
                index = $(this).index();
            })
        }

        function move(d, prev, now) {
            pics.eq(prev).css({
                left: 0
            }).stop().animate({
                left: -pics.eq(0).width() * d
            }, moveTime).end().eq(now).css({
                left: pics.eq(0).width() * d
            }).stop().animate({
                left: 0
            }, moveTime);
            //当前分页按钮更换颜色
            that.find(".list").children("span").css({
                background: ""
            }).eq(now).css({
                background: "yellow"
            })
        };

        if (autoPlay) {
            let t = setInterval(() => {
                rightClick()
            }, delayTime);

            that.hover(function() {
                clearInterval(t)
            }, function() {
                t = setInterval(() => {
                    rightClick()
                }, delayTime)
            })

        }


    }
})(jQuery);

$(function() {
    //搜索栏
    $(".topinput").on("input", function() {
        $(".search_tips").show()
        $.ajax({
            url: "https://suggest.taobao.com/sug",
            data: {
                code: "utf-8",
                q: $(this).val(),
                _ksTS: "1636597022670_357"
            },
            success: res => {
                let str = ""
                res.result.forEach(val => {
                    str += `<p>${val[0]}</p>`
                })
                $(".search_tips").html(str)
            },
            dataType: "jsonp"
        });
        $("body").on("click", () => {
            $(".search_tips").hide()
        });
    });

    //轮播图
    const imgs = [{
        title: "banner1",
        src: "../../images/banner1-1.jpg"
    }, {
        title: "banner2",
        src: "../../images/banner1-2.jpg"
    }, {
        title: "banner3",
        src: "../../images/banner1-3.png"
    }];
    $(".box").banner(imgs, {
        btns: true,
        list: true,
        autoPlay: true,
        delayTime: 3000,
        index: 0,
        moveTime: 300
    });
    //三级菜单
    $(".banner_left").find("li").hover(function() {
        $(this).children(".three_list").show();
    }, function() {
        $(this).children(".three_list").hide();
    })
})